<template>
  <div id="serviceCenter">
    <com-head :opacity="0">客服中心</com-head>
    <p>非常感谢您关注并使用本平台，如您在使用期间有任何问题都可以通过“客服反馈”发送，我们将尽快处理。</p>
    <div class="title">
      <input type="text" v-model="title" placeholder="请输入标题">
    </div>
    <div class="beizhu">
      <textarea
        style="resize:none"
        border
        maxlength="200"
        placeholder="亲，请输入您想要反馈的内容"
        v-model="content"
        cols="80"
        rows="5"
      ></textarea>
      <span class="number">{{number}}/200</span>
    </div>
    <com-button
      class="btn"
      :disabled="number==0 || title.length==0"
      :class="{active: number>0 && title.length>0 }"
      :click="submit"
    >提交</com-button>
  </div>
</template>

<script>
export default {
  name: "serviceCenter",
  data() {
    return {
      title: "",
      number: "0",
      content: ""
    };
  },
  watch: {
    content: function(a, b) {
      this.number = a.length;
      console.log(this.number);
      if (this.number > 199) {
        this.$bus.$emit("toast", "字数不能超过200");
      }
    }
  },
  computed: {},

  created() {},

  mounted() {},

  methods: {
    submit() {
      this.axios
        .post("user/feedback", {
          token: this.token(),
          title: this.title,
          feedback: this.content
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.$router.push("userCenter");
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
#serviceCenter {
  padding: 110px 32px;
  color: #222;
  font-size: 26px;
  line-height: 50px;
  .title {
    margin-top: 30px;
    input {
      width: 686px;
      height: 80px;
      padding-left: 20px;
      box-sizing: border-box;
      background: #f6f6f6;
      border-radius: 4px;
      border: 1Px solid #ddd;
    }
  }
  .beizhu {
    position: relative;
    textarea {
      width: 686px;
      height: 380px;
      margin-top: 20px;
      padding: 20px;
      border: 1Px solid #ddd;
      box-sizing: border-box;
      background-color: #f6f6f6;
    }
    .number {
      color: #ddd;
      position: absolute;
      bottom: 8px;
      right: 8px;
    }
  }
  .btn {
    margin-top: 400px;
    width: 686px;
    height: 78px;
    background: #ddd;

    border-radius: 4px;
  }
  .active {
    background: rgba(65, 215, 189, 1);
  }
}
</style>